<template>
	<view class="">
		<u-sticky zIndex="999" bgColor="#f7f7f7" v-if="!isRadio">
			<u-tabs 
				lineWidth="30" 
				lineColor="#F3C35C" 
				:activeStyle="{ color: '#111', fontWeight: 600}" 
				:inactiveStyle="{color:'#999999'}" 
				:scrollable="false" 
				:list="tabList" 
				@click="onTabs">
			</u-tabs>
		</u-sticky>
		<view class="pl-20 pr-20">
			<view v-if="coupons.length > 0">
				<view class="padding-20 bg-white mb-30 border-radius-10" v-for="(item, index) in coupons" :key="item.id">
					<view class="flex align-center" @click="toRadio(item)">
						<view 
							class="width-130 height-130 border-radius-4 flex flex-column align-center justify-center"
							style="background:linear-gradient(34deg, #F3C45D, #EDAC2F);">
							<!-- <text class="fsize-30 fweigh-600">{{item.parValue}}<text class="fsize-26">元</text></text> -->
							<text class="fsize-26">{{item.typeName}}</text>
						</view>
						<view class="ml-20">
							<view class="fszie-30 fweigh-600">{{item.couponName}}</view>
							<view class="fsize-24 line-gray-9 mt-10">{{item.startDate}} - {{item.endDate}}</view>
						</view>
					</view>
					<view class="mt-20 border-t pt-20" v-if="!isRadio">
						<view class="flex justify-between align-center">
							<view class="flex align-center" @click="onShowRule(index)">
								<text>使用规则</text>
								<view class="ml-10" :class="item.isShowRule?'down':'up'"><uni-icons custom-prefix="iconfont" type="icon-down" size="12"/></view>
							</view>
							<view class="my-button-mini" @click="openQrc(item.couponCode)">核销码</view>
						</view>
						<view class="rule-text fsize-22 line-gray-6 lh-32 mt-20" v-if="item.isShowRule">
							{{item.distributionDate || '暂无'}}
							<!-- <view>1、本券仅适用于 FENDI CLUB 精酿啤酒屋下单购买任意商品</view>
							<view>2、本券每单仅使用一张，不与其他优惠券同享</view>
							<view>3、本券过期后不退，请在规定时间内使用</view> -->
						</view>
					</view>
				</view>
			</view>
			<view class="none" v-else>
						<image src="/static/images/order/default_img_order.png"></image>
						<view>暂无可用优惠券</view>
					</view>
		</view>
		<u-popup
			:show="showQrc"
			@close="showQrc = false"
			round="6"
			:safeAreaInsetBottom="false"
			mode="center"
		>
			<view class="qrc-content" v-if="!isRadio">
				<w-barcode :options="options"/>
				<view class="mt-20 text-align-center">{{options.code}}</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				showQrc: false,
				options: {
					width: 670,
					height: 100,
					code: "E515215815165"
				},
				tabIndex: 0,
				isShowRule: false, // 默认不显示规则
				coupons: [],
				tabList: [
					{name:'未使用', value: 0},
					{name:'已使用', value: 1},
					{name:'已过期', value: 2}
				],
				isRadio:false,
			}
		},
		onLoad(opt) {
			if(opt.tickets){
				this.isRadio = true,
				this.coupons = JSON.parse(opt.tickets) || []
				// console.log(this.coupons);
			}else {
				this.getUserFoodCoupon(1)
			}
		},
		methods : {
			openQrc(code){
				this.options.code = code
				this.showQrc = true
			},
			onTabs(e){
				this.getUserFoodCoupon(e.index + 1)
			},
			getUserFoodCoupon(status){
				this.$api.GetUserFoodCoupon({pageNum: 1, pageSize: 9999, status: status}).then(res=>{
					this.coupons = res.data.list.map(im=>{
						im.isShowRule = false
						return im
					})
				})
			},
			onShowRule(ix){
				this.coupons[ix].isShowRule = !this.coupons[ix].isShowRule
			},
			toRadio(row){
				if(this.isRadio){
					uni.$emit('isRefresh', row)
					uni.navigateBack({
						delta: 1
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.up {
		transition: all 0.3s;
	}
	.down {
		transform: rotate(-180deg);
		transition: all 0.3s;
	}
	.qrc-content{
		padding: 20rpx;
	}
	.none {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			color: #777;
			line-height: 1.3rem !important;
	
			image {
				width: 400rpx;
				height: 333rpx;
				margin-bottom: 40rpx;
			}
	
		}
</style>